<template>
  <div class="login-wrapper">
    <el-row>
        <el-col :span="12" :xs="0"></el-col>
        <el-col :span="12" :xs="24">
            <el-form class="login-form"  ref="ruleFormRef"
                :model="loginForm"
                :rules="rules">
                <h1>Hello</h1>
                <h2>欢迎来到后台管理</h2>
                <el-form-item  prop="username">
                      <el-input  :prefix-icon="User" v-model="loginForm.username" />
                </el-form-item>
                <el-form-item prop="password">
                      <el-input   :prefix-icon="Lock" v-model="loginForm.password" type="password" show-password />
                </el-form-item>
                <el-form-item>
                      <el-button :loading="loading" @click="loginBtn" class="login-btn" type="primary" >登录</el-button>
                </el-form-item>
            </el-form>
        </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import {User,Lock} from '@element-plus/icons-vue'
import { reactive,ref } from 'vue';
import useUserStore from '@/store/modules/user'
import { ElNotification } from 'element-plus'
import { useRouter,useRoute } from 'vue-router'
import {getTime} from '@/utils/time'
let loginForm = reactive({
    username:'admin',
    password:'123456'
})
let loading = ref(false)
let ruleFormRef = ref()
let userStore = useUserStore()
const router = useRouter()
const route = useRoute()
const loginBtn = async ()=>{
    
    
   await ruleFormRef.value.validate()
   loading.value = true
    try {
        await userStore.userLogin(loginForm)
        ElNotification({
            type:'success',
            message:'登录成功',
            title:`Hi,${getTime()}好`
        })
        let redirect:string = route.query.redirect as string
        router.push({path:redirect || '/'})
        loading.value = false
    } catch (error) {
         ElNotification({
            type:'error',
            message:(error as Error).message,
        })
        loading.value = false
    }
}
 const validateUsername = (rules:any,value: any, callback: any)=>{
    if(value.length >=5){
        callback()
    }else{
        callback('账号至少五位')
    }
 }
 const validatePassword = (rules:any, value: any, callback: any)=>{
    if(value.length >=6){
        callback()
    }else{
        callback('密码至少六位')
    }
 }
const rules = {
    username:[
         {  trigger: 'change',validator: validateUsername, required: true,},
    ],
    password:[
        {  trigger: 'change' ,validator: validatePassword, required: true,},
    ]
}
</script>

<style scoped lang="scss">
.login-wrapper{
    width: 100%;
    height: 100vh;
    background: url('@/assets/image/background.jpg') no-repeat;
    background-size: cover;
    .login-form{
        position: relative;
        width: 80%;
        top: 25vh;
        padding: 20px;
        background:url('@/assets/image/login_form.png') no-repeat;
        background-size: cover;
        h1,h2{
            color: white;
             margin-bottom: 20px;
        }
        h1{
            font-size: 40px;
           
        }
        .login-btn{
            width: 100%;
        }
    }
}
</style>
